<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅视界——多语种写作多维智评与可视化系统</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="history.js"></script>
    <link rel="stylesheet" href="history-review.css">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="guide.css">

    <script>
        tailwind.config = {
            theme: {
                extend: {

                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <style>
        .nav-item:hover {
            color: #3b82f6;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .chart-container {
            width: 100%;
            height: 400px;
        }
        .dropdown {
            display: none;
        }
        .dropdown.show {
            display: block;
        }
         .list {
      padding: 20px;
    }

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      border-bottom: 1px solid #e0e0e0;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .row:last-child {
      border-bottom: none;
    }

    .row:hover {
      background-color: #f0f8ff;
      transform: translateX(5px);
    }

     .essay-title {
      flex: 1;
      text-align: left;
      color: #333333;
      font-weight: 500;
      font-size: 14px; /* 缩小字体 */
      white-space: nowrap; /* 防止标题换行 */
      overflow: hidden;
      text-overflow: ellipsis; /* 超出部分显示省略号 */
    }

    .score {
      margin: 0 10px; /* 缩窄分数和时间间距 */
      color: #3498db;
      font-weight: bold;
      font-size: 16px; /* 缩小字体 */
    }

    .time {
      color: #666666;
      font-size: 12px; /* 缩小字体 */
    }

.container {
      margin: 20px auto;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    /* 作文弹窗样式 */
    #essay-modal .modal-content {
        max-width: 800px;
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    #essay-modal .modal-content h3 {
        font-size: 24px;
        color: #1a365d;
        margin-bottom: 20px;
        font-weight: 600;
        text-align: center;
        position: relative;
        padding-bottom: 15px;
    }

    #essay-modal .modal-content h3::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #3b82f6, #60a5fa);
        border-radius: 3px;
    }

    #essay-modal .meta-info {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 30px;
        padding: 15px;
        background: #f8fafc;
        border-radius: 12px;
    }
    
    #essay-modal .meta-info span {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #4b5563;
        font-size: 16px;
    }

    #essay-modal .meta-info span:first-child {
        color: #3b82f6;
        font-weight: 600;
    }

    #essay-modal .essay-content {
        background: white;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        line-height: 1.8;
        font-size: 16px;
        color: #374151;
        max-height: 60vh;
        overflow-y: auto;
    }

    #essay-modal .essay-content::-webkit-scrollbar {
        width: 8px;
    }

    #essay-modal .essay-content::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    #essay-modal .essay-content::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    #essay-modal .essay-content::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    #essay-modal .essay-content::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    #essay-modal .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 24px;
        color: #94a3b8;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    #essay-modal .close-btn:hover {
        background: #f1f5f9;
        color: #3b82f6;
        transform: rotate(90deg);
    }

    /* 添加动画效果 */
    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #essay-modal .modal-content {
        animation: modalSlideIn 0.3s ease-out;
    }

    /* 加载状态样式 */
    .loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .loading-state p {
        color: #6b7280;
        font-size: 16px;
    }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
   <header>
    <div class="logo">阅视界</div>
    <ul class="nav-menu">
        <li><a href="index.html">首页</a></li>
        <li><a href="scoring-page.html">即时评分</a></li>
        <li><a href="history-review.html" class="active">评分历史</a></li>
        <li><a href="data-analysis.html">数据分析</a></li>
        <li><a href="feedback.html">反馈中心</a></li>
        <li><a href="guide.html">使用指南</a></li>
    </ul>
    <div class="user-actions">
        <div class="user-info" style="display: none;">
            <span id="username-display" style="cursor: pointer;"></span>
        </div>
        <div class="auth-buttons">
            <button class="primary" onclick="window.location.href='auth.html#login'">登录</button>
            <button onclick="window.location.href='auth.html#register'">注册</button>
        </div>
    </div>
</header>
    <!-- 用户详情模态窗口 -->
    <div id="user-modal" class="modal">
        <div class="modal-content user-modal-content">
            <span class="close-button">&times;</span>
            <div class="user-profile-header">
                <div class="user-avatar">
                    <img src="images/avatar.svg" alt="用户头像">
                </div>
                <h2 id="modal-username"></h2>
            </div>
            <div class="user-details">
                <div class="detail-item">
                    <div class="detail-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="detail-info">
                        <label>邮箱</label>
                        <span id="modal-email"></span>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-icon">
                        <i class="fas fa-fingerprint"></i>
                    </div>
                    <div class="detail-info">
                        <label>用户ID</label>
                        <span id="modal-userid"></span>
                    </div>
                </div>
            </div>
            <div class="logout-section">
                <button class="logout-btn" onclick="handleLogout()">
                    <i class="fas fa-sign-out-alt"></i>
                    退出登录
                </button>
            </div>
        </div>
    </div>

<!--<div class="container">-->
<!--  <div class="list" id="essay-list">-->
<!--    &lt;!&ndash; 加载状态 &ndash;&gt;-->
<!--    <div class="loading-state">-->
<!--      <div class="spinner"></div>-->
<!--      <p>正在加载历史作文...</p>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->
<!-- 修改后（直接使用列表容器） -->
 <!-- 内容区域外框 -->
   <div class="content-wrapper">
       <div id="essay-list" class="essay-list-container">
  <!-- 内容 -->
<!--      加载状态 &ndash;&gt;-->
    <div class="loading-state">
      <div class="spinner"></div>
      <p>正在加载历史作文...</p>
    </div>
   <!-- 作文列表项示例 -->
    <div class="essay-item">
      <span class="essay-title">如何提高英语写作能力</span>
      <span class="essay-date">2023/07/15</span>
    </div>
</div>
       <!-- 在原有HTML中添加弹窗结构 -->
       <div id="score-modal" class="modal hidden">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <h2 class="modal-title">
        <i class="fas fa-star rating-icon"></i>
        作文详细评分
      </h2>
      <button class="close-btn">
        <i class="fas fa-times"></i>
      </button>
    </div>

    <!-- 评分概览卡片 -->
    <div class="score-card">
      <div class="overall-score">
        <div class="score-value">0</div>
        <div class="score-label">综合评分</div>
        <div class="score-progress">
          <div class="progress-bar" style="width: 0%"></div>
        </div>
      </div>

<!-- 评分维度部分修改为图片样式 -->
  <div class="dimension-grid">
    <div class="dimension-item vocab">
      <div class="dimension-name">词汇运用</div>
      <div class="dimension-score">18</div>
    </div>

    <div class="dimension-item sentence">
      <div class="dimension-name">句子构建</div>
      <div class="dimension-score">16</div>
    </div>

    <div class="dimension-item structure">
      <div class="dimension-name">篇章结构</div>
      <div class="dimension-score">20</div>
    </div>

    <div class="dimension-item content">
      <div class="dimension-name">内容质量</div>
      <div class="dimension-score">15</div>
    </div>
  </div>
    <!-- 优秀句子和建议 -->
    <div class="feedback-section">
      <div class="feedback-card good-sentences">
        <div class="feedback-header">
          <i class="fas fa-thumbs-up"></i>
          <h3>优秀句子</h3>
        </div>
        <ul class="feedback-list">
          <!-- 动态插入 -->
        </ul>
      </div>

      <div class="feedback-card suggestions">
        <div class="feedback-header">
          <i class="fas fa-magic"></i>
          <h3>改进建议</h3>
        </div>
        <ul class="feedback-list">
          <!-- 动态插入 -->
        </ul>
      </div>
    </div>
  </div>
</div>
           </div>
<!--<div id="score-modal" class="modal hidden">-->
<!--  <div class="modal-content">-->
<!--    <span class="close-btn">&times;</span>-->
<!--    <h2 class="modal-title">作文详细评分</h2>-->

<!--    &lt;!&ndash; 评分概览 &ndash;&gt;-->
<!--    <div class="score-overview">-->
<!--      <div class="overall-score">-->
<!--        <span class="score-value">0</span>-->
<!--        <span class="score-label">总体评分</span>-->
<!--      </div>-->
<!--      <div class="score-details">-->
<!--        <div class="score-item">-->
<!--          <span class="score-category">词汇评分</span>-->
<!--          <span class="score-number">0</span>-->
<!--        </div>-->
<!--        <div class="score-item">-->
<!--          <span class="score-category">句子评分</span>-->
<!--          <span class="score-number">0</span>-->
<!--        </div>-->
<!--        <div class="score-item">-->
<!--          <span class="score-category">结构评分</span>-->
<!--          <span class="score-number">0</span>-->
<!--        </div>-->
<!--        <div class="score-item">-->
<!--          <span class="score-category">内容评分</span>-->
<!--          <span class="score-number">0</span>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 优秀句子和建议 &ndash;&gt;-->
<!--    <div class="recommendation-section">-->
<!--      <div class="good-sentences">-->
<!--        <h3>优秀句子</h3>-->
<!--        <ul class="sentence-list"></ul>-->
<!--      </div>-->
<!--      <div class="suggestions">-->
<!--        <h3>改进建议</h3>-->
<!--        <ul class="suggestion-list"></ul>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->
<!--       <div id="essay-modal" class="modal hidden">-->
<!--  <div class="modal-content">-->
<!--    <h3 id="essay-modal-title"></h3>-->
<!--    <div class="meta">-->
<!--      <span id="essay-modal-date"></span>-->
<!--      <span id="essay-modal-score"></span>-->
<!--    </div>-->
<!--    <div id="essay-modal-content" class="content"></div>-->
<!--  </div>-->
<!--</div>-->
   </div>

<!--&lt;!&ndash; 查看作文的模态框（隐藏） &ndash;&gt;-->
<!--<div id="essay-modal" class="modal">-->
<!--  <div class="modal-content">-->
<!--    <span class="close-btn">&times;</span>-->
<!--    <h3 id="modal-title"></h3>-->
<!--    <div class="meta-info">-->
<!--      <span id="modal-score"></span>-->
<!--      <span id="modal-time"></span>-->
<!--    </div>-->
<!--    <div class="essay-content" id="modal-content"></div>-->
<!--  </div>-->
<!--</div>-->

    <script>

    </script>
</body>
</html>



